/* eslint-disable vue/valid-v-for */
<template>
  <div class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-row :gutter="13" type="flex">
        <el-col :span="2">
          <el-select v-model="selectSortValue" placeholder="请选择" @change="selectSort">
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-select v-model="selectStatusValue" placeholder="请选择" @change="selectStatus">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <!-- @blur="searchSku" -->
        <el-col :span="4">
          <el-input v-model="search" placeholder="输入供应商.sku查询"/>
        </el-col>

        <el-col :span="2" class="lingkc">
          <input v-model="defect" type="checkbox">
          不显示0库存
        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="searchSku">查询</el-button>
        </el-col>

        <el-col :span="1" >
          <el-button type="primary" @click="download()">下载</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- v-loading="listLoading" -->
    <el-table :data="stockList" border highlight-current-row style="width: 95%;">
      <el-table-column
        :formatter="formatterClassification"
        prop="classification"
        label="分类"
        min-width="5%"
      />
      <el-table-column prop="skuCode" label="SKU编码" min-width="10%"/>
      <el-table-column prop="skuName" label="SKU名称" min-width="20%"/>
      <el-table-column prop="systemStock" label="系统库存" min-width="10%">
        <template slot-scope="scope">
          <span style="color:blue" @click="serialNumber(scope.row.stockId,scope.row.warehouseName,scope.row.skuName)">{{ scope.row.systemStock }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :formatter="availableAmountProcess"
        prop="systemStock"
        label="可用库存"
        min-width="10%"
      />
      <el-table-column prop="onTheWayAmount" label="在途量" min-width="10%"/>
      <el-table-column prop="lockAmount" label="锁定量" min-width="10%"/>
      <el-table-column
        :formatter="formatterRmb.bind(null,'unitPrice')"
        prop="unitPrice"
        label="库存单价"
        min-width="10%"
      />
      <el-table-column
        :formatter="formatterRmb.bind(null,'lnventoryCosts')"
        prop="lnventoryCosts"
        label="库存成本"
        min-width="10%"
      />
    </el-table>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :visible.sync="dialogTableVisible" title="" width="26%">
      <span class="jiachu">SKU名称：  {{ skuName }}</span>
      <el-table :data="gridData" >
        <el-table-column property="warehouseName" label="仓库" width="200"/>
        <el-table-column property="serialNumber" label="序列号" width="200"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// post,
import { get } from '@/api/utils'

export default {
  data() {
    return {
      sorts: [
        { value: null, label: '全部类型' },
        { value: '1', label: '整机' },
        { value: '2', label: '工具' },
        { value: '3', label: '辅材' },
        { value: '4', label: '赠品' }
      ],

      statusList: [
        { value: null, label: '全部状态' },
        { value: '1', label: '正常' },
        { value: '2', label: '停采' },
        { value: '3', label: '停用' }
      ],
      selectSortValue: null,
      selectStatusValue: null,
      search: '',
      selectName: '请选择',
      dialogTableVisible: false,
      dialogFormVisible: false,
      gridData: [],
      warehouseName: '',
      skuName: '',
      stockList: [],
      total: 1,
      listLoading: true,
      offset: 0,
      limit: 10,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      },
      defect: '',
      time: ''
    }
  },
  created() {
    this.getSkuList()
    this.getWarehouse()
  },

  methods: {
    download: function() {
      var param = {}
      if (this.selectSortValue !== null) {
        param.classification = this.selectSortValue
      }
      if (this.selectStatusValue !== null) {
        param.status = this.selectStatusValue
      }
      if (this.search !== null) {
        param.search = this.search
      }

      param.defect = this.defect
      get('/wxh-cloud-rest/rest/', '/pas/stock/downloadAllStock', param)
        .then(response => {
          const date = new Date()
          const filefix =
            date.getFullYear() +
            '-' +
            parseInt(date.getMonth() + 1) +
            '-' +
            date.getDate() +
            ' ' +
            date.getHours() +
            ':' +
            date.getMinutes() +
            ':' +
            date.getSeconds()
          const blob = new Blob([response.data], {
            type: 'text/csvchartset=utf-8' // 将会被放入到blob中的数组内容的MIME类型
          }) // 创建一个blob对象
          const a = document.createElement('a') // 创建一个<a></a>标签
          a.href = URL.createObjectURL(blob) // response is a blob
          a.download = filefix + '库存.csv' // 文件名称
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          a.remove()
          return response
        })
        .catch(error => {
          console.log(error)
        })
    },

    serialNumber(stockId, warehouseName, skuName) {
      this.skuName = skuName
      this.warehouseName = warehouseName
      var data = {
        stockId: stockId
      }
      get('/wxh-cloud-rest/rest/', '/pas/stock/getSerialNumberList', data)
        .then(response => {
          if (response.data.status === 'success') {
            this.gridData = response.data.data.list
          }
        })
      this.dialogTableVisible = true
    },
    formatterClassification(row, column) {
      if (row.classification) {
        if (row.classification === 1) {
          return '整机'
        } else if (row.classification === 2) {
          return '工具'
        } else if (row.classification === 3) {
          return '辅材'
        } else if (row.classification === 4) {
          return '赠品'
        }
      }
    },
    formatterStatus(row, column) {
      if (row.status) {
        if (row.status === 1) {
          return '正常'
        } else if (row.status === 2) {
          return '停采'
        } else if (row.status === 1) {
          return '停用'
        }
      }
    },
    availableAmountProcess(row, column) {
      row.systemStock = row.systemStock !== null ? row.systemStock : 0
      row.lockAmount = row.lockAmount !== null ? row.lockAmount : 0
      return row.systemStock - row.lockAmount
    },
    formatterRmb(field, row, column) {
      if (field) {
        return '￥' + row[field]
      }
    },

    getSkuList() {
      this.listLoading = true
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize

      var data = {
        offset: this.listQuery.pageNumber,
        limit: this.listQuery.pageSize
      }

      if (this.selectSortValue !== null) {
        data.classification = this.selectSortValue
      }

      if (this.selectStatusValue !== null) {
        data.status = this.selectStatusValue
      }

      if (this.search !== null) {
        data.search = this.search
      }
      if (this.warehouseId != null) {
        data.warehouseId = this.warehouseId
      }

      data.defect = this.defect
      get('/wxh-cloud-rest/rest/', '/pas/stock/listAll', data)
        .then(response => {
          if (response.data.status === 'success') {
            console.log(
              '-------------------------------------------------------------'
            )
            this.total = response.data.data.count
            this.stockList = response.data.data.stockList

            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    selectSort(event) {
      this.selectSortValue = event
      this.listQuery.page = 1
      this.getSkuList()
    },
    selectStatus(event) {
      this.selectStatusValue = event
      this.listQuery.page = 1

      this.getSkuList()
    },

    searchSku(event) {
      // console.log(event)
      this.listQuery.page = 1
      this.getSkuList()
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getSkuList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getSkuList()
    }

  }
}
</script>
<style>
.jiachu{
  font-weight: bold;
}
.lingkc{
  font-size: 13px;
  line-height: 40px;
}
</style>

